<template>
  <Modal
    v-model="modal1"
    fullscreen
    footer-hide>
    <div style="background-color: #c3c3c3;padding-top: 20px;padding-bottom: 20px">
      <div style="min-height: 900px;padding: 60px 80px;width: 800px;margin: 10px auto;background-color: white;position: relative">
        <div style="height: 30px">
          <div style="float: left;width: 30px;height: 30px;border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc"></div>
          <div style="float: right;width: 30px;height: 30px;border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc"></div>
        </div>
        <div ref="content" v-html='content' style="padding-bottom: 30px;padding-left: 30px;padding-right: 30px"></div>
        <div style="height: 30px;width: 640px;position: absolute;bottom: 60px">
          <div style="position: static">
            <div style="float: left;width: 30px;height: 30px;border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc"></div>
            <div style="float: right;width: 30px;height: 30px;border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc"></div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'word',
  data () {
    return {
      modal1: false,
      content: ''
    }
  },
  methods: {
    show (content) {
      this.content = content
      this.modal1 = true
    }
  }
}
</script>

<style scoped>
  /deep/ .ivu-modal-content {
    background-color: #c3c3c3;
  }
  /deep/ .ivu-modal-close {
    right: 28px;
    border-radius: 15px;
    background: #f5222d;
  }
  /deep/ .ivu-icon-ios-close{
   color: white;
  }
</style>
